<template>
	<view class="app">
		<view class="search-div u-flex">
			<view class="u-flex u-m-r-20" @click="showSearchType = true"><u--text suffixIcon="arrow-down-fill" iconStyle="font-size: 18px" :text="search_type"></u--text></view>

			<u-search @search="searchList" :showAction="false" placeholder="请输入关键字" v-model="obj.keyword"></u-search>
		</view>
		<view class="tabs-div">
			<view class="tabs-box"><u-tabs :list="statuslist" @click="clickTabs"></u-tabs></view>
			<view class="u-m-l-40 u-flex u-flex-items-center" @click="showscreen = true">
				<text class="u-font-30 u-m-r-10">筛选</text>
				<text class="el-sc-liebiao3"></text>
			</view>
		</view>
		<u-gap height="200rpx"></u-gap>
		<view class="">
			<u-list @scrolltolower="scrolltolower" :scrollIntoView="o_id" height="calc(100vh - 200rpx)">
				<u-list-item v-for="(item, index) in List" :key="index" :id="'o_' + index">
					<view class=" content-box ">
						<view class="u-flex u-flex-between header">
							<text>订单编号:{{ item.order_no }}</text>
							<text>{{ item.status }}</text>
						</view>
						<u-line margin="20rpx 0"></u-line>
						<view class="u-flex u-m-b-20" v-for="(sitem, i) in item.orderCommoditys">
							<u-image radius="20rpx" width="200rpx" height="200rpx" :src="sitem.master"></u-image>
							<view class="goods-info u-flex-column u-m-l-20 u-flex-1 ">
								<view class="u-flex-3">
									<u-text :text="sitem.name" lines="2"></u-text>
									<u-text margin="20rpx 0" :text="sitem.pvs_value_new" lines="2"></u-text>
								</view>
								<view class="u-flex">
									<u-text mode="price" :text="sitem.sell_price"></u-text>
									<u-text :text="'x' + sitem.count"></u-text>
								</view>
								<u-text
									v-if="sitem.attachlist && sitem.attachlist.length > 0"
									:text="'附加x' + sitem.attachlist.length + ',共￥' + sitem.attach_pirce"
									lines="2"
								></u-text>
							</view>
							<view class="u-flex u-flex-items-center u-flex-column u-flex-between">
								<view class="u-flex-3 u-flex u-flex-column after-status">
									<text>{{ sitem.after_type | after_status_text }}</text>
									<text v-if="sitem.orderAfter">{{ sitem.orderAfter.state_text }}</text>
								</view>

								<u--text type="primary" text="维权详情" @click="showAfter(sitem.order_after_id)"></u--text>
							</view>
						</view>
						<u-line margin="20rpx 0"></u-line>
						<view class="u-flex u-flex-wrap u-flex-start">
							<u-button customStyle="width:140rpx;margin:10rpx" size="small" type="primary" @click="showOrder(item.id)">订单详情</u-button>
						</view>
					</view>
				</u-list-item>
				<u-loadmore @loadmore="searchList" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
			</u-list>
		</view>
		<u-popup :show="showSearchType" mode="top" @close="showSearchType = false">
			<view class="u-flex u-flex-wrap">
				<view class="screen_btn" @click="setsearchtype(item.value)" v-bind:class="obj.type == item.value ? 'active' : ''" v-for="(item, i) in type" :key="i">
					{{ item.label }}
				</view>
			</view>
		</u-popup>
		<u-popup :show="showscreen" @close="showscreen = false">
			<view class="u-p-l-20">
				<u-gap height="40rpx"></u-gap>
				<u-text bold text="支付方式"></u-text>
				<view class="u-flex u-flex-wrap u-m-t-20">
					<view class="screen_btn" @click="obj.pay_type = item.value" v-bind:class="obj.pay_type == item.value ? 'active' : ''" v-for="(item, i) in pay_type" :key="i">
						{{ item.label }}
					</view>
				</view>
				<u-text bold text="配送方式"></u-text>
				<view class="u-flex u-flex-wrap u-m-t-20">
					<view
						class="screen_btn"
						@click="obj.order_type = item.value"
						v-bind:class="obj.order_type == item.value ? 'active' : ''"
						v-for="(item, i) in order_type"
						:key="i"
					>
						{{ item.label }}
					</view>
				</view>
				<u-text bold text="维权类型"></u-text>
				<view class="u-flex u-flex-wrap u-m-t-20">
					<view
						class="screen_btn"
						@click="obj.after_type = item.value"
						v-bind:class="obj.after_type == item.value ? 'active' : ''"
						v-for="(item, i) in after_type"
						:key="i"
					>
						{{ item.label }}
					</view>
				</view>
				<u-text bold text="维权状态"></u-text>
				<view class="u-flex u-flex-wrap u-m-t-20">
					<view
						class="screen_btn"
						@click="obj.after_status = item.value"
						v-bind:class="obj.after_status == item.value ? 'active' : ''"
						v-for="(item, i) in after_status"
						:key="i"
					>
						{{ item.label }}
					</view>
				</view>
			</view>
			<view class="u-flex u-flex-items-center footer">
				<u-button size="small" shape="circle" @click="reset">重置</u-button>
				<u-button class="u-m-l-60" type="primary" size="small" shape="circle" @click="searchList">确定</u-button>
			</view>
		</u-popup>
		<lc-fab-touch ref="fab" :content="contents" horizontal="right" vertical="bottom" direction="horizontal" @trigger="trigger" />
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';

export default {
	data() {
		return {
			List: [],
			page: 1,
			status: 'loadmore',
			loadingText: '努力加载中',
			loadmoreText: '上拉或点击加载更多',
			nomoreText: '实在没有了',
			show_model: false,
			content: '',
			params: {
				end_time: '',
				keyword: '',
				order_from: '',
				page: 1,
				pay_type: '',
				size: 10,
				start_time: '',
				status: '',
				type: '7'
			},
			list: [
				{
					name: '全部'
				},
				{
					name: '待支付'
				},
				{
					name: '待发货'
				},
				{
					name: '待核销'
				},
				{
					name: '已发货'
				},
				{
					name: '已收货'
				}
			],
			showMoneyEdit: false,
			rk: 1,
			showCancel: false,
			expressCancel: {},
			showAddress: false,
			orderAddressObj: {},
			showExpress: false,
			orderExpObj: {},
			showLocal: false,
			showCancellocal: false,
			reasonslist: [],
			showPrintReceipt: false,
			templateRecList: [],
			templateList: [],
			jur_addons: {},
			cancalobj: {
				oid: '',
				id: 0,
				reason: ''
			},

			type: [
				{
					value: '7',
					label: '订单编号'
				},
				{
					value: '1',
					label: '用户ID'
				},
				{
					value: '2',
					label: '用户信息'
				},
				{
					value: '3',
					label: '收件人信息'
				},
				{
					value: '4',
					label: '地址信息'
				},
				{
					value: '5',
					label: '商品名称'
				},
				{
					value: '6',
					label: '商品编号'
				}
			],
			pay_type: [
				{
					value: '',
					label: '全部'
				},
				{
					value: 1,
					label: '余额'
				},
				{
					value: 2,
					label: '微信'
				},
				{
					value: 3,
					label: '支付宝'
				},
				{
					value: 4,
					label: '后台支付'
				}
			],
			order_type: [
				{
					value: '',
					label: '全部'
				},
				{
					value: 1,
					label: '快递'
				},
				{
					value: 2,
					label: '自提'
				},
				{
					value: 3,
					label: '同城'
				}
			],
			after_type: [
				{
					value: '',
					label: '全部'
				},
				{
					value: 1,
					label: '仅退款'
				},
				{
					value: 2,
					label: '退货退款'
				},
				{
					value: 3,
					label: '换货'
				}
			],
			after_status: [
				{
					value: '',
					label: '全部'
				},
				{
					value: 1,
					label: '维权中'
				},
				{
					value: 2,
					label: '维权完成'
				},
				{
					value: 3,
					label: '未维权'
				}
			],
			statuslist: [
				{
					value: '',
					name: '全部'
				},
				{
					value: '1',
					name: '待支付'
				},
				{
					value: '2',
					name: '待发货'
				},
				{
					value: '13',
					name: '待核销'
				},
				{
					value: '3',
					name: '已发货'
				},
				{
					value: '4',
					name: '已完结'
				},
				// {
				//   value: '5',
				//   label: '已评价'
				// },
				// {
				//   value: '6',
				//   label: '已删除'
				// },
				// {
				//   value: '7',
				//   label: '部分发货'
				// },
				{
					value: '8',
					name: '已收货'
				},
				// {
				//   value: '9',
				//   label: '部分收货'
				// },
				// {
				// 	value: '10',
				// 	name: '维权中'
				// },
				// {
				// 	value: '11',
				// 	name: '维权完成'
				// },
				{
					value: '12',
					name: '已关闭'
				}
			],
			obj: {
				//name:'',
				type: 7,
				keyword: '',
				pay_type: '',
				after_type: '',
				start_time: '',
				end_time: '',
				status: '',
				after_status: '',
				order_type: '',
				page: 1,
				size: 10
			},
			objTemp: {},
			total: 0,
			isLoading: false,

			psoRec: {
				order_id: [],
				printer_id: '',
				template_id: ''
			},
			login_type: '',
			login_type_url: '',
			dk: 1,
			btn_type: 0,
			showSearchType: false,
			showscreen: false,
			o_id: '',
			contents: [
				{
					iconPath: 'arrow-up',
					selectedIconPath: 'arrow-up',
					text: '顶部',

					active: false
				},
				{
					iconPath: 'home',
					selectedIconPath: 'home-fill',
					text: '首页',
					active: false
				}
			]
		};
	},
	onLoad(e) {
		if (e.after_status) {
			this.obj.after_status = e.after_status;
		}
		this.searchList();
	},
	onPullDownRefresh() {
		this.searchList();
	},
	computed: {
		search_type() {
			let a = this.type.findIndex(_ => _.value == this.obj.type);
			return this.type[a].label;
		},
		...mapState({
			$BasicsUrl: state => state.$BasicsUrl
		})
	},
	filters: {
		after_status_text: function(value) {
			switch (value) {
				case 1:
					return '仅退款';
					break;
				case 2:
					return '退货退款';
					break;
				case 3:
					return '换货';
					break;
				default:
					return '-';
					break;
			}
		}
	},
	methods: {
		trigger(e) {
			if (e.index == 0) {
				this.o_id = '';
				this.$nextTick(() => {
					this.o_id = 'o_0';
				});
			} else if (e.index == 1) {
				uni.$u.route({
					url: 'pages/index/index'
				});
			}
		},
		changelist() {
			uni.$u.http
				.get('/shop/order/' + this.order_id, {custom: {id: 10}})
				.then(res => {
					let detail = res.msg;
					let i = this.List.findIndex(_ => _.id == this.order_id);
					this.List[i].status = detail.status;
					this.List[i] = detail;
					this.List[i].order_type = detail.order_type;
				})
				.catch(err => {});
		},
		closepup() {
			this.show = false;
		},
		openpup() {},

		clickTabs(data) {
			let index = data.index;
			this.obj.status = this.statuslist[index].value;
			this.searchList();
		},
		scrolltolower() {
			this.getlist();
		},
		/*订单筛选*/
		setsearchtype(value) {
			this.obj.type = value;
			this.showSearchType = false;
		},
		reset() {
			this.obj.after_status = '';
			this.obj.after_type = '';
			this.obj.order_type = '';
			this.obj.status = '';
			this.obj.pay_type = '';
		},
		//查询数据
		searchList() {
			//复制查询对象
			this.objTemp = Object.assign({}, this.obj);
			this.List = [];
			this.getlist();
			this.showscreen = false;
		},
		//获取列表
		getlist() {
			this.status = 'loading';

			if (this.objTemp.status == 13) {
				this.objTemp.status = 2;
				this.objTemp.order_type = 2;
			}
			uni.$u.http
				.get('/shop/aftersale/afterSaleList', {params: this.objTemp, custom: {id: 10}})
				.then(res => {
					uni.stopPullDownRefresh();

					this.isLoading = false;
					let o = res.msg;
					//处理sku规格数据
					o.data.forEach(e => {
						if (e.orderCommoditys.length > 0) {
							e.orderItemCountPrice = 0;
							e.orderCommoditys.forEach(x => {
								if (x.master.indexOf('http') == -1) {
									x.master = this.$BasicsUrl + '/' + x.master;
								}
								if (x.pvs_value) {
									//转换处理SKU数据->红+L+大
									let l = x.pvs_value.split(','),
										s = '';
									l.forEach(k => {
										s += k.split(':')[1] + '+';
									});
									s = s.substring(0, s.length - 1);
									x.pvs_value_new = s;
								}
								e.orderItemCountPrice += x.sell_price * x.count;
								if (e.attach && e.attach.length > 0 && x.attach_value && x.attach_value != '') {
									x.attachlist = [];
									x.attach_pirce = 0;

									e.attach.forEach(a => {
										if (x.attach_value.indexOf(a.attach_value) > -1 && x.attachlist.findIndex(_ => _.attach_value == a.attach_value) == -1) {
											if (x.sku_id) {
												if (x.sku_id == a.sku_id) {
													x.attachlist.push(a);
													x.attach_pirce += Number(a.attach_price) * a.num;
												}
											} else {
												x.attachlist.push(a);
												x.attach_pirce += Number(a.attach_price) * a.num;
											}
										}
									});
									e.orderItemCountPrice += x.attach_pirce;
									x.attach_pirce = x.attach_pirce.toFixed(2);
								}
							});
						}
						e.orderItemCountPrice = e.orderItemCountPrice.toFixed(2);
					});
					if (o.data.length > 0) {
						this.params.page++;
						let list = o.data;
						list.forEach(a => {
							a.show = false;
							// if (a.master.indexOf('http') == -1) {
							// 	a.master = this.$BasicsUrl + '/' + a.master;
							// }
						});
						this.List = this.List.concat(list);
						this.status = 'loadmore';
					} else {
						this.status = 'nomore';
					}
				})
				.catch(err => {});
		},
		/*订单操作*/
		//查看详情
		showOrder(id) {
			uni.$u.route({
				url: 'pages/order/detail?id=' + id
			});
		},
		//查看详情
		showOrder(id) {
			uni.$u.route({
				url: 'pages/order/detail?id=' + id
			});
		},
		showAfter(id) {
			uni.$u.route({
				url: 'pages/order/afteritem?id=' + id
			});
		}
	}
};
</script>

<style lang="scss">
.tabs-box {
	width: 560rpx;
}
.content-box {
	width: 710rpx;
	margin: 20rpx auto;
	padding: 20rpx;
	position: relative;
	.header {
		font-size: 28rpx;
	}
}
.goods-info {
	height: 200rpx;
	font-size: 28rpx;
	// justify-content: space-between;
}
.skulist {
	height: 70vh;
	margin-bottom: 20rpx;
}
.batch-div {
	font-size: 30rpx;
	padding-bottom: 20rpx;
}
.after-status {
	font-size: 28rpx;
}
</style>
